<template>
    <div style="min-height: 600px" v-loading="loading">
        <el-card shadow="never" style="min-height: 400px">
            <div slot="header">
                <el-row>
                    <el-col :span="12">
                        <span>{{blog.title}}</span>
                    </el-col>
                    <el-col :span="12">
                        <div style="text-align: right;">
                            <el-button @click="$share()" style="padding: 3px 0" type="text" icon="el-icon-share">分享</el-button>
                            <el-button @click="edit" style="padding: 3px 0" type="text" icon="el-icon-edit" v-if="token">编辑</el-button>
                            <el-button style=" padding: 3px 0" type="text" icon="el-icon-more-outline" @click="more">更多博客</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
                发布 {{blog.createTime}}
                <br> 更新 {{blog.updateTime}}
            </div>
            <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;border-bottom: 1px solid #E4E7ED;padding: 5px 0px 5px 0px">
                <pre style="font-family: '微软雅黑'">{{blog.description}}</pre>
            </div>
            <div v-html="blog.content" class="markdown-body" style="padding-top: 20px"></div>
        </el-card>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    // import GistApi from '@/api/gist'
    export default {
        data() {
            return {
                blog: {
                    id: "",
                    title: "",
                    content: "",
                    description: ""
                },
                loading: false,
            }
        },
        computed: {
            ...mapGetters([
                'token',
            ])
        },
        mounted() {
            this.loading = true
            this.blog.id = this.$route.params.id
            // console.log(this.$route.params.id)
            // GistApi.single(this.blog.id).then((response) => {
            //     let result = response.data
            //     for (let key in result.files) {
            //         this.blog['title'] = key
            //         this.blog['content'] = this.$markdown(result.files[key]['content'])
            //         this.blog['description'] = result['description']
            //         this.blog['createTime'] = this.$util.utcToLocal(result['created_at'])
            //         this.blog['updateTime'] = this.$util.utcToLocal(result['updated_at'])
            //         // console.log(JSON.stringify(this.blog))
            //         break
            //     }
            // }).then(() => this.loading = false)


        },
        methods: {
            edit() {
                if (!this.token) {
                    this.$message({
                        message: '请绑定有效的Token',
                        type: 'warning'
                    })
                    return
                }
                this.$router.push('/user/blog/edit/' + this.blog.id)
            },
            more() {
                this.$router.push('/user/blog/main')
            }
        }
    }
</script>